<template>
  <div class="default-main ba-table-box">
      <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

      <!-- 表格顶部菜单 -->
      <TableHeader :buttons="['refresh', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
          quick-search-placeholder="根据分类名称模糊查询" />
      <!-- 表格 -->
      <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
      <Table />

      <detailDialog ref="formRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { defaultOptButtons } from '/@/components/table'
import detailDialog from './detail.vue'
import { useI18n } from 'vue-i18n'
import { baTableApi } from '/@/api/common'
import baTableClass from '/@/utils/baTable'
import { customerDetail } from '/@/api/backend/customer/index'
let optBtn = defaultOptButtons(['delete'])
let optButtons: OptButton[] = [
    {
        render: 'tipButton',
        name: 'info',
        title: '查看',
        text: '',
        type: 'primary',
        icon: 'fa fa-envira',
        class: 'table-row-info',
        disabledTip: false,
        click: (row: TableRow) => {

          detailButtonClick(row.id) //详情
        }
    }
]
optBtn = optButtons.concat(optBtn)
defineOptions({
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'customer/index',
})

const { t } = useI18n()
const tableRef = ref()
const baTable = new baTableClass(
  new baTableApi('/admin/v1/customer/'),
  {
      column: [
          { type: 'selection', align: 'center', operator: false },
            { label: '公司名称', prop: 'company', align: 'center', operator: 'LIKE', operatorPlaceholder: '请输入公司名称' },
            { label: '申请人', align: 'center', operator: 'LIKE', operatorPlaceholder: '请输入申请人名称', formatter(row, column, cellValue, index) {
                    if (row.user_id == 0) {
                        return row.name;
                    } else {
                        return row.user.username;
                    }
                } },
            { label: '手机号', prop: 'mobile', align: 'center', operator: 'LIKE', operatorPlaceholder: '请输入手机号' },
            { label: '订单号', prop: 'order_sn', align: 'center', operator:false, operatorPlaceholder: '请输入手机号',showOverflowTooltip:true },
            {
                label: '用户', align: 'center', operator: false, showOverflowTooltip: true, formatter(row, column, cellValue, index) {
                    if (row.user_id == 0) {
                        return "请关联用户";
                    } else {
                        return row.user.username;
                    }
                }
            },
            {
                label: '状态',
                prop: 'status',
                align: 'center',
                render: 'tag',
                custom: { '0': 'danger', '1': 'success' },
                replaceValue: { '0': '待处理', '1': '已处理' },
            },
            {
                label: '创建时间',
                prop: 'create_time',
                align: 'center',
                render: 'datetime',
                sortable: 'custom',
                operator: false,
            },
            {
                label: '操作',
                align: 'center',
                width: '100',
                render: 'buttons',
                buttons: optBtn,
                operator: false,
            },
      ],
      dblClickNotEditColumn: ['all'],
  },
  {
      defaultItems: {
            gender: 0,
            status: '1',
            user_type:'0'
      },
  }
)
const detailButtonClick = (id: string) => {

baTable.form.extend!['detail'] = {}
baTable.form.operate = 'Detail'
baTable.form.loading = true
customerDetail(id).then((res: any) => {
    baTable.form.extend!['detail'] = res.data.row
    baTable.form.loading = false
})
}

provide('baTable', baTable)

onMounted(() => {
  baTable.table.ref = tableRef.value
  baTable.mount()
  baTable.getIndex()?.then(() => {
      baTable.dragSort()
  })
})
</script>

<style scoped lang="scss"></style>
